<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
          <el-form-item prop="name" label="运费模板名称：">
            <el-input v-model="filters.name" clearable placeholder="运费模板名称"></el-input>
          </el-form-item>
          <el-form-item prop="defaultFlag" label="是否默认模板：">
            <el-select v-model="filters.defaultFlag" clearable placeholder="是否默认模板" style="width:215px">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="type" label="是否免邮：">
            <el-select v-model="filters.type" clearable placeholder="是否免邮" style="width:215px">
              <el-option label="是" value="2"></el-option>
              <el-option label="否" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="chargeWay" label="计费方式：">
            <el-select v-model="filters.chargeWay" clearable placeholder="计费方式" style="width:215px">
              <el-option label="配送区域固定设置配送运费(O2O)" value="4"></el-option>
              <el-option label="按距离阶梯设置配送运费(O2O)" value="5"></el-option>
              <el-option label="件数" value="1"></el-option>
              <el-option label="重量" value="2"></el-option>
              <el-option label="体积" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商家：">
            <el-select v-model="filters.merchantName" clearable placeholder="商家" style="width:215px">
              <el-option
                v-for="item in merchants"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="search-button button20">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-plus"
              :label="$t('action.add')"
              type="primary"
              @click="handleAdd"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              type="primary"
              @click="resetForm('filters')"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="padding-top: 20px;">
      <el-card style=" margin-bottom: 20px;text-align: left;width:100%;height: auto;">
        <div v-for="item in this.pageResult" :key="item.id" class="text item">
          <template>
            <div class="grid-content bg-purple-dark">
              <span style="float:left;padding-top:10px;padding-left:15px;">
                {{item.name}}&nbsp &nbsp &nbsp
                <font style="color:red" v-if="item.isShipping">存在包邮模板</font>
                &nbsp &nbsp &nbsp所属商家:{{item.merchantName}} 最后编辑时间:{{item.updateTime}}
              </span>
              <div style="float:right; padding-top:10px;padding-right:15px;">
                <span style="">
                  <kt-button
                    icon="fa fa-edit"
                    :label="$t('action.edit')"
                    type="primary"
                    @click="handleEdit(item)"
                  />
                </span>
                <span style="">
                  <kt-button
                    icon="fa fa-edit"
                    label="设置默认"
                    v-if="item.defaultFlag!=1"
                    @click="setDefault(item.id)"
                  />
                </span>
                <span style="">
                  <kt-button
                    icon="fa fa-edit"
                    label="删除"
                    v-if="item.defaultFlag!=1"
                    @click="handleDelete(item.id)"
                  />
                </span>
              </div>
            </div>
            <div v-if="item.chargeWay==1">
              <el-table :data="item.freightRuleList" border="" style="width: 100%">
                <el-table-column prop="deliveryCode" label="配送方式" width="180"></el-table-column>
                <el-table-column prop="regionNames" label="配送区域" width="180"></el-table-column>
                <el-table-column prop="underUnit" label="首件数（件）"></el-table-column>
                <el-table-column prop="underUnitCost" label="首费(元)"></el-table-column>
                <el-table-column prop="perUnit" label="续件数（件）"></el-table-column>
                <el-table-column prop="perUnitCost" label="续费(元)"></el-table-column>
              </el-table>
            </div>
            <div v-else-if="item.chargeWay==2">
              <el-table :data="item.freightRuleList" border="" style="width: 100%">
                <el-table-column prop="deliveryCode" label="配送方式" width="180"></el-table-column>
                <el-table-column prop="regionNames" label="配送区域" width="180"></el-table-column>
                <el-table-column prop="underUnit" label="首重（g）"></el-table-column>
                <el-table-column prop="underUnitCost" label="首费(元)"></el-table-column>
                <el-table-column prop="perUnit" label="续重（g）"></el-table-column>
                <el-table-column prop="perUnitCost" label="续费(元)"></el-table-column>
              </el-table>
            </div>
            <div v-else>
              <el-table :data="item.freightRuleList" border="" style="width: 100%">
                <el-table-column prop="deliveryCode" label="配送方式" width="180"></el-table-column>
                <el-table-column prop="regionNames" label="配送区域" width="180"></el-table-column>
                <el-table-column prop="underUnit" label="首体积（cm³）"></el-table-column>
                <el-table-column prop="underUnitCost" label="首费(元)"></el-table-column>
                <el-table-column prop="perUnit" label="续体积（cm³）"></el-table-column>
                <el-table-column prop="perUnitCost" label="续费(元)"></el-table-column>
              </el-table>
            </div>
          </template>
        </div>
      </el-card>
    </div>
    <div class="toolbar" style="padding:10px;">
      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[10, 20, 30, 40]"
      ></el-pagination>
    </div>
    <!--新增编辑界面-->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="60%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataForm"
        label-width="100px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
      >
        <el-row class="searchDialog-input">
          <el-form-item label="id：" prop="id" v-if="false">
            <el-input
              v-model="dataForm.id"
              :disabled="true"
              auto-complete="off"
              placeholder="请输入ID"
            ></el-input>
          </el-form-item>
          <el-form-item label="运费模板：" prop="name">
            <el-input v-model="dataForm.name" auto-complete="off" placeholder="请输入运费模板"></el-input>
          </el-form-item>
          <el-form-item label="商家名称：" prop="merchantName">
            <el-select
              v-model="dataForm.merchantName"
              style="width:100%"
              @change="merchantNameChange"
            >
              <el-option
                v-for="item in merchants"
                :key="item.value"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否免邮：" prop="type">
            <el-radio-group
              v-model="dataForm.type"
              @change="changeType"
              :disabled="shippingDisabled"
            >
              <el-radio :label="1">自定义运费</el-radio>
              <el-radio :label="2">卖家承担运费</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="isShowByType">
            <el-form-item label="渠道模式：" prop="channelMode">
              <el-checkbox-group v-model="dataForm.channelMode" :disabled="channelModeDisabled">
                <el-checkbox
                  v-for="(channelMode,index) in channelModes"
                  :label="channelMode"
                  :key="index"
                >{{channelMode}}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="计费方式：">
              <el-radio-group v-model="dataForm.chargeWay" :disabled="chargeWayDisabled">
                <el-radio :label="4" disabled>配送区域固定设置配送运费(O2O)</el-radio>
                <el-radio :label="5" disabled>按距离阶梯设置配送运费(O2O)</el-radio>
                <el-radio :label="1">件数</el-radio>
                <el-radio :label="2">重量</el-radio>
                <el-radio :label="3">体积</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item label="配送方式：" prop="itemType">
            <span>
              除指定地区外，其余地区的运费采用“默认运费”
              <span style="color:red;font-size:12px">（勾选的配送方式客户才可选用）</span>
            </span>
            <el-checkbox-group v-model="dataForm.itemType">
              <el-checkbox :label="1" @change="handleChecItemType">快递物流</el-checkbox>
              <template v-if="checkboxShow1">
                <el-col :span="24">
                  <div class="grid-content bg-purple-dark">
                    <el-form-item label="默认运费">
                      <div v-if="this.dataForm.chargeWay==1">
                        <!--                      <el-input-number v-model="dataForm.underUnit" :precision="2" :step="1" ></el-input-number>-->
                        <el-input
                          type="number"
                          v-model="dataForm.underUnit"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        <span>件内，</span>
                        <el-input
                          type="number"
                          v-model="dataForm.underUnitCost"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        <span>元，每增加</span>
                        <el-input
                          type="number"
                          v-model="dataForm.perUnit"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        <span>件， 增加运费</span>
                        <el-input
                          type="number"
                          v-model="dataForm.perUnitCost"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        元
                      </div>
                      <div v-else-if="this.dataForm.chargeWay==3">
                        <el-input
                          type="number"
                          v-model="dataForm.underUnit"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        <span>cm³内，</span>
                        <el-input
                          type="number"
                          v-model="dataForm.underUnitCost"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        <span>元，每增加</span>
                        <el-input
                          type="number"
                          v-model="dataForm.perUnit"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        <span>cm³，增加运费</span>
                        <el-input
                          type="number"
                          v-model="dataForm.perUnitCost"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                      </div>
                      <div v-else>
                        <el-input
                          type="number"
                          v-model="dataForm.underUnit"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        <span>g内，</span>
                        <el-input
                          type="number"
                          v-model="dataForm.underUnitCost"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        <span>元，每增加</span>
                        <el-input
                          type="number"
                          v-model="dataForm.perUnit"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        <span>g， 增加运费</span>
                        <el-input
                          type="number"
                          v-model="dataForm.perUnitCost"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                      </div>
                      <span>元</span>
                    </el-form-item>
                  </div>
                </el-col>
                <div v-if="this.tableDataDelivery.length>0">
                  <el-table :data="tableDataDelivery" border="" style="width: 100%">
                    <el-table-column label="运送到" width="180">
                      <template slot-scope="scope">
                        <span>{{ scope.row.distributionCode }}</span>
                        <span style="float:right;padding-right:15px;">
                          <el-button
                            size="mini"
                            type="primary"
                            @click="handleEditMatching(scope.row)"
                          >编辑</el-button>
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="underUnit1" label="首重（g）" width="180">
                      <template slot-scope="scope">
                        <el-input
                          v-model="scope.row.underUnit1"
                          auto-complete="off"
                          placeholder="0"
                        ></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="underUnitCost1" label="首费(元)" width="180">
                      <template slot-scope="scope">
                        <el-input
                          v-model="scope.row.underUnitCost1"
                          auto-complete="off"
                          placeholder="0"
                        ></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="perUnit1" label="续重（g）" width="180">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.perUnit1" auto-complete="off" placeholder="0"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="perUnitCost1" label="续费(元)" width="180">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.perUnitCost1" placeholder="0"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)"
                        >删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div style="margin-top: 20px">
                  <el-button @click="handleEditAppointArea">为指定区域设置运费</el-button>
                </div>
              </template>
              <!--指定区域设置运费-->
              <!--<template v-if="checkboxShow2">
                <el-table :data="tableDataShipping" border="" style="width: 100%">
                  <el-table-column label="指定条件包邮" width="400" prop="distributionRegion">
                    <template slot-scope="scope">
                      <span>{{scope.row.distributionRegion}}</span>
                      <span style="float:right;padding-right:15px;">
                        <el-button
                          size="mini"
                          type="primary"
                          @click="handleEditMatching(scope.row)"
                        >编辑</el-button>
                        <el-button
                          size="mini"
                          type="primary"
                          @click="handleEditArea(scope.row,scope.$index)"
                        >设为全国</el-button>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="deliveryCode" label="选择配送方式" width="250">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.deliveryCode" style="width:100%">
                        <el-option
                          v-for="item in distributionCodes"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="包邮条件" width="250" prop="chargeWay">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.chargeWay"
                        @change="changeChargeWay(scope.row.chargeWay,scope.$index)"
                        style="width:100%"
                      >
                        <el-option
                          v-for="item in chargeWays"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                      <div v-if="shipppngShow1[scope.$index]">满
                        <el-input
                          v-model="scope.row.underUnit"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>件包邮
                      </div>
                      <div v-if="shipppngShow2[scope.$index]">满
                        <el-input
                          v-model="scope.row.underUnitCost"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>元包邮
                      </div>
                      <div v-if="shipppngShow3[scope.$index]">
                        满
                        <el-input
                          v-model="scope.row.underUnit"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>件,
                        满
                        <el-input
                          v-model="scope.row.underUnitCost"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>元包邮
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDeleteShipping(scope.$index, scope.row)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                  <el-button @click="handleAddShipping">新增</el-button>
                </div>
              </template>-->
              <el-checkbox
                :label="2"
                v-if="isShowByType"
                @change="handleCheckbox2"
                name="type"
              >指定条件包邮
              </el-checkbox>
              <template v-if="checkboxShow2">
                <el-table :data="tableDataShipping" border="" style="width: 100%">
                  <el-table-column label="指定条件包邮" width="400" prop="distributionRegion">
                    <template slot-scope="scope">
                      <span>{{scope.row.distributionRegion}}</span>
                      <span style="float:right;padding-right:15px;">
                        <el-button
                          size="mini"
                          type="primary"
                          @click="handleEditMatching(scope.row)"
                        >编辑</el-button>
                        <el-button
                          size="mini"
                          type="primary"
                          @click="handleEditArea(scope.row,scope.$index)"
                        >设为全国</el-button>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="deliveryCode" label="选择配送方式" width="250">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.deliveryCode" style="width:100%">
                        <el-option
                          v-for="item in distributionCodes"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="包邮条件" width="250" prop="chargeWay">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.chargeWay"
                        @change="changeChargeWay(scope.row.chargeWay,scope.$index)"
                        style="width:100%"
                      >
                        <el-option
                          v-for="item in chargeWays"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                      <div v-if="shipppngShow1[scope.$index]">满
                        <el-input
                          v-model="scope.row.underUnit"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        件包邮
                      </div>
                      <div v-if="shipppngShow2[scope.$index]">满
                        <el-input
                          v-model="scope.row.underUnitCost"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        元包邮
                      </div>
                      <div v-if="shipppngShow3[scope.$index]">
                        满
                        <el-input
                          v-model="scope.row.underUnit"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        件,
                        满
                        <el-input
                          v-model="scope.row.underUnitCost"
                          auto-complete="off"
                          style="width: 100px"
                        ></el-input>
                        元包邮
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDeleteShipping(scope.$index, scope.row)"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                  <el-button @click="handleAddShipping">新增</el-button>
                </div>
              </template>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}
        </el-button>
      </div>
    </el-dialog>
    <!--新增匹配条件-->
    <el-dialog
      title="区域设置"
      width="40%"
      :visible.sync="editDialogVisibleMatching"
      :close-on-click-modal="false"
    >
      <el-form :model="dataFormMatching" label-width="100px" ref="dataForm" :size="size">
        <el-form-item label="id" prop="id" v-if="false">
          <el-input v-model="dataFormMatching.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="区域设置：" prop="serveno">
          <el-cascader
            size="large"
            :options="options"
            v-model="dataFormMatching.selectedOptions"
            :props="{ multiple: true }"
            collapse-tags
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button
          :size="size"
          @click.native="editDialogVisibleMatching = false"
        >{{$t('action.cancel')}}
        </el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitFormMatching"
          :loading="editLoading"
        >{{$t('action.submit')}}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  //import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

  import {
    CodeToText,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus
  } from "element-china-area-data";
  import FreightTemplate from "../Configuration/FreightTemplate";

  export default {
    components: {
      FreightTemplate,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        merchants: [],
        defaultFlag: "", //是否为默认
        channelModeDisabled: false, //渠道是否可选
        chargeWayDisabled: false, //计费方式是否可选
        shippingDisabled: false, //是否免邮，是否可选
        shipppngShow3: [], //满件显示，满元显示
        shipppngShow2: [], //满元显示
        shipppngShow1: [], //满件显示
        tableDataShipping: [], //指定包邮数据
        tableDataDelivery: [], //自定义运费数据
        channelModes: [], //渠道模式
        isShowByType: true,
        options: regionData,
        selectedOptions: [],
        selectedOptionsData: "",
        merchantNames: [
          {
            value: "商家",
            label: "商家"
          }
        ],
        distributionCodes: [
          {
            value: "1",
            label: "快递物流"
          }
        ],
        chargeWays: [
          {
            value: 1,
            label: "件数"
          },
          {
            value: 2,
            label: "金额"
          },
          {
            value: 3,
            label: "件数+金额"
          }
        ],
        size: "small",
        filters: {
          name: "",
          merchantId: "",
          merchantName: "",
          chargeWay: "",
          type: "",
          defaultFlag: ""
        },
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: [],
        totalSize: 0,
        operation: false, // true:新增, false:编辑
        editDialogVisible: false, // 新增编辑界面是否显示
        editDialogVisibleMatching: false,
        editLoading: false,
        dataFormRules: {
          name: [{required: true, message: "请输入模板名称", trigger: "blur"}],
          merchantName: [
            {required: true, message: "请选择商家", trigger: "change"}
          ],
          itemType: [
            {required: true, message: "请选择一种配送方式", trigger: "change"}
          ],
          channelMode: [
            {required: true, message: "请选择渠道模式", trigger: "change"}
          ]
        },
        // 新增编辑界面数据
        dataForm: {
          id: "",
          name: "",
          merchantId:0,
          merchantName: "",
          type: 1,
          itemType: [],
          channelMode: [],
          chargeWay: 1, //计费模式
          underUnit: "",
          underUnitCost: "",
          perUnit: "",
          perUnitCost: ""
        },
        dataFormMatching: {
          selectedOptions: []
        },
        checkboxShow1: false,
        checkboxShow2: false
      };
    },
    methods: {
      queryMerchantListOther: function (data) {
        let that = this;
        this.utils.request.queryMerchantListOther({}, function (res) {
          that.merchants = res.data;
        });
      },
      //区域选择设置
      handleAppointAreaChange: function (data) {
        console.log(data);
      },
      //为指定区域设置运费
      handleEditAppointArea: function () {
        this.editDialogVisibleMatching = true;
      },
      //区域设置
      handleEditArea: function (row, index) {
        this.$message({message: "操作成功", type: "success"});
      },
      //删除指定包邮
      handleDeleteShipping: function (index, param) {
        this.tableDataShipping.splice(index);
      },
      //新增指定包邮
      handleAddShipping: function () {
        console.log(this.$refs["dataForm"]);
        if (!this.$refs["dataForm"]) {
          this.$refs["dataForm"].clearValidate();
        }
        let param = {};
        param.distributionRegion = "全国（默认值）";
        this.tableDataShipping.push(param);
      },
      //根据商家Id查询商家渠道
      merchantNameChange: function (data) {
        let obj = {};
        if (data != undefined) {
          obj = this.merchants.find(item => {
            //这里的userList就是上面遍历的数据源
            return item.name === data; //筛选出匹配数据
          });
          this.dataForm.merchantId = obj.id;
        }
        //查询渠道+
        this.channelModes = [];
        let that = this;
        this.utils.request.queryChannelListOther(
          {merchantId: obj.merchantId},
          function (res) {
            if (res.code == "0000") {
              if (res.data != undefined) {
                res.data.forEach(function (val) {
                  that.channelModes.push(val.channelName);
                });
              }
            }
          }
        );
      },
      //是否免邮
      changeType: function (data) {
        if (data == 1) {
          this.isShowByType = true;
        } else {
          this.isShowByType = false;
        }
      },
      //设置未默认
      setDefault: function (data) {
        let param = {};
        param.id = data;
        this.utils.request.setOrderFreightTemplateDefault(
          param,
          this.setDefaultBack
        );
      },
      // 设置默认回调
      setDefaultBack: function (data) {
        if (data.code == "0000") {
          this.$message({message: "操作成功", type: "success"});
        } else {
          this.$message({message: "操作失败, " + data.msg, type: "error"});
        }
        this.findPage();
      },
      // 获取分页数据
      findPage: function (params) {
        console.log(this.filters);
        let this_ = this;
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = params.pageNum;
        this_.filters.limit = params.pageSize;
        this.utils.request.queryOrderFreightTemplate(this_.filters, function (
          res
        ) {
          if (res.data.rows == null) {
            res.data.rows = [];
          }
          this_.pageResult = res.data.rows;
          this_.totalSize = Number(res.data.total);
        });
      },
      // 显示新增界面
      handleAdd: function () {
        let ma = localStorage.getItem("merchantName");
        this.dataForm = {
          id: "",
          name: "",
          merchantName: "",
          type: 1,
          itemType: [],
          channelMode: [],
          chargeWay: 1, //计费模式
          underUnit: "",
          underUnitCost: "",
          perUnit: "",
          perUnitCost: ""
        };
        this.checkboxShow1 = false;
        this.checkboxShow2 = false;
        this.shippingDisabled = false;
        this.chargeWayDisabled = false;
        this.channelModeDisabled = false;
        this.tableDataShipping = [];
        this.channelModes = [];
        this.isShowByType = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
        this.editDialogVisible = true;
        this.operation = true;
      },
      // 删除运费条目
      handleDelete: function (data) {
        let param = {};
        param.id = data;
        this.utils.request.deleteOrderFreightTemplate(param, this.deletInfoBack);
      },
      // 删除修改回调
      deletInfoBack: function (data) {
        if (data.code == "0000") {
          this.$message({message: "操作成功", type: "success"});
        } else {
          this.$message({message: "操作失败, " + data.msg, type: "error"});
        }
        this.findPage();
      },
      // 显示编辑界面
      handleEdit: function (data) {
        console.log(this.$refs["dataForm"]);
        if (this.$refs["dataForm"] != undefined) {
          this.$refs["dataForm"].clearValidate();
        }
        let this_ = this;
        this_.defaultFlag = data.defaultFlag;
        //自定义费用
        if (data.type == 1) {
          this.dataForm.name = data.name;
          this.dataForm.merchantName = data.merchantName;
          this.dataForm.id = data.id;
          this.dataForm.type = data.type;
          this.dataForm.underUnit = data.freightRuleList[0].underUnit;
          this.dataForm.underUnitCost = data.freightRuleList[0].underUnitCost;
          this.dataForm.perUnit = data.freightRuleList[0].perUnit;
          this.dataForm.perUnitCost = data.freightRuleList[0].perUnitCost;
          this.checkboxShow1 = true;
          //指定包邮条目
          if (data.isShipping) {
            this.tableDataShipping = data.shippingFreightTemplateItemResponseList;
            $.each(data.shippingFreightTemplateItemResponseList, function (
              index,
              val
            ) {
              this_.changeChargeWay(val.chargeWay, index);
            });
            this.checkboxShow2 = true;
            this.dataForm.itemType = [1, 2];
          } else {
            this.dataForm.itemType = [1];
          }
          //渠道
          this.merchantNameChange();
          let channelModes = data.channelMode.split(",");
          $.each(channelModes, function (index, val) {
            if (val != null && val != "") {
              this_.dataForm.channelMode.push(val);
            }
          });
          this.channelModeDisabled = true;
          this.shippingDisabled = true;
          this.chargeWayDisabled = true;
          this.isShowByType = true;
        } else {
          //卖家承担运费
          this.dataForm.name = data.name;
          this.dataForm.merchantName = data.merchantName;
          this.dataForm.id = data.id;
          this.dataForm.type = data.type;
          this.dataForm.itemType[0] = 1;
          this.checkboxShow1 = false;
          this.checkboxShow2 = false;
          this.isShowByType = false;
          this.shippingDisabled = true;
        }
        this.operation = false;
        this.editDialogVisible = true;
      },
      // 新增匹配条件
      handleEditMatching: function (row) {
        this.dataFormMatching.matching = [row.variable, row.operator, row.name];
        this.editDialogVisibleMatching = true;
      },
      // 编辑
      submitForm: function () {
        //判断指定条件包邮数据格式
        console.log(this.tableDataShipping);
        let flag = true;
        this.tableDataShipping.forEach((item, index, arr) => {
          if (item.deliveryCode == "" || item.deliveryCode == undefined) {
            this.$message({
              message: "请选择指定条件包邮-配送方式！",
              type: "warning"
            });
            flag = false;
            return;
          }
          if (item.chargeWay == "" || item.chargeWay == undefined) {
            this.$message({
              message: "请选择指定条件包邮-包邮条件！",
              type: "warning"
            });
            flag = false;
            return;
          }
          if (item.underUnit == "" || item.underUnit == undefined) {
            this.$message({
              message: "请选择指定条件包邮-包邮条件！",
              type: "warning"
            });
            flag = false;
            return;
          }
        });
        if (!flag) {
          return;
        }
        let this_ = this;
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              let params = Object.assign({}, this.dataForm);
              params.defaultFlag = this_.defaultFlag;
              ///type等于1自定义运费，2卖家承担运费
              if (this_.dataForm.type == 1) {
                //渠道模式
                let channelMode = "";
                $.each(this_.dataForm.channelMode, function (index, val) {
                  channelMode += val + ",";
                });
                params.channelMode = channelMode;
                //默认运费模板
                let freightRuleItemDefault = {};
                let freightRule = {};
                freightRule.underUnit = this.dataForm.underUnit;
                freightRule.underUnitCost = this.dataForm.underUnitCost;
                freightRule.perUnit = this.dataForm.perUnit;
                freightRule.perUnitCost = this.dataForm.perUnitCost;
                freightRuleItemDefault.freightRule = JSON.stringify(freightRule);
                freightRuleItemDefault.type = 1;
                params.freightRuleItemDefault = freightRuleItemDefault;
                //自定义运费模板
                params.freightRuleItemList = [];
                //指定包邮运费模板
                let arr = new Array();
                $.each(this_.tableDataShipping, function (index, val) {
                  let shippingFreightRuleItem = {};
                  let shippingfreightRule = {};
                  shippingFreightRuleItem.chargeWay = val.chargeWay;
                  shippingFreightRuleItem.deliveryCode = val.deliveryCode;
                  if (
                    val.underUnit != undefined &&
                    val.underUnitCost != undefined
                  ) {
                    shippingfreightRule.underUnit = val.underUnit;
                    shippingfreightRule.underUnitCost = val.underUnitCost;
                    shippingFreightRuleItem.freightRule = shippingfreightRule;
                  } else if (
                    val.underUnit != undefined &&
                    val.underUnitCost == undefined
                  ) {
                    shippingfreightRule.underUnit = val.underUnit;
                    shippingfreightRule.underUnitCost = 0;
                    shippingFreightRuleItem.freightRule = shippingfreightRule;
                  } else if (
                    val.underUnit == undefined &&
                    val.underUnitCost != undefined
                  ) {
                    shippingfreightRule.underUnit = 0;
                    shippingfreightRule.underUnitCost = val.underUnitCost;
                    shippingFreightRuleItem.freightRule = shippingfreightRule;
                  }
                  arr.push(shippingFreightRuleItem);
                });
                params.shippingFreightRuleItemList = arr;
              } else {
                params.chargeWay = 1;
              }
              this.utils.request.editOrderFreightTemplate(params, function (res) {
                if (res.code == "0000") {
                  this_.$message({message: "操作成功", type: "success"});
                  this_.editDialogVisible = false;

                  this_.findPage(null);
                } else {
                  this_.$message({
                    message: "操作失败, " + res.msg,
                    type: "error"
                  });
                }
              });
            });
          }
        });
      },

      // 编辑匹配条件
      submitFormMatching: function (data) {
        this.$message({message: "操作成功", type: "success"});
        this.editDialogVisibleMatching = false;
      },

      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.filters.start_time = "";
          this.filters.end_time = "";
          this.filters.merchantName = "";
          this.findPage(null);
        }
      },

      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      handleChange(myArray) {
        let data;
        myArray.every(function (item, index, array) {
          data =
            CodeToText[item[0]] +
            ", " +
            CodeToText[item[1]] +
            ", " +
            CodeToText[item[2]];
        });
        this.selectedOptionsData = data;
      },
      //是否免邮 快递物流
      handleChecItemType(value) {
        if (value && this.dataForm.type == 1) {
          this.checkboxShow1 = true;
        } else {
          this.checkboxShow1 = false;
        }
      },
      handleCheckbox2(value) {
        if (value) {
          this.checkboxShow2 = true;
        } else {
          this.checkboxShow2 = false;
        }
      },
      //包邮类型显示
      changeChargeWay(param, index) {
        if (param == 1) {
          this.shipppngShow1[index] = true;
          this.shipppngShow2[index] = false;
          this.shipppngShow3[index] = false;
        } else if (param == 2) {
          this.shipppngShow1[index] = false;
          this.shipppngShow2[index] = true;
          this.shipppngShow3[index] = false;
        } else {
          this.shipppngShow1[index] = false;
          this.shipppngShow2[index] = false;
          this.shipppngShow3[index] = true;
        }
      }
    },
    mounted() {
      // this.initColumns()
      this.findPage();
      //初始化商家下拉框
      this.queryMerchantListOther();
    }
  };
</script>

<style lang='scss' scoped>
  .bg-purple-dark {
    background: #edf1f2 !important;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 48px;
  }

  .el-row {
    position: initial;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  /deep/ .box-card {
    margin-bottom: 20px;
    text-align: left;
    width: 200px;
    height: auto;
  }
</style>
